<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery选项卡插件多种tab标签切换效果</title>
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div class="demo">	
	<h2>实例1、上下滑动选项卡切换</h2>
	<ul class="tabbtn" id="move-animate-top">
		<li class="current"><a href="http://www.lanrenzhijia.com.com/">jquery 特效</a></li>
		<li><a href="http://www.lanrenzhijia.com.com">javascript 特效</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">div+css 教程</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="topcon">
		<div class="subbox">
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">CSS如何定位工程</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>
				</ul>
			</div><!--tabcon end-->
		</div><!--tabcon end-->
	</div>
	
	<h2>实例2、左右滑动选项卡切换</h2>
	<ul class="tabbtn" id="move-animate-left">
		<li class="current"><a href="http://www.lanrenzhijia.com.com/">jquery 特效</a></li>
		<li><a href="http://www.lanrenzhijia.com.com">javascript 特效</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">div+css 教程</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="leftcon">
		<div class="subbox">
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">CSS如何定位工程</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
				</ul>
			</div><!--tabcon end-->
			<div class="sublist">
				<ul>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
					<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>
				</ul>
			</div><!--tabcon end-->
		</div><!--tabcon end-->
	</div>
	
	<h2>实例3、淡隐淡现选项卡切换</h2>
	<ul class="tabbtn" id="fadetab">
		<li class="current"><a href="http://www.lanrenzhijia.com.com/">jquery 特效</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">javascript 特效</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">div+css 教程</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="fadecon">
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">CSS如何定位工程</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>
			</ul>
		</div><!--tabcon end-->
	</div><!--tabcon end-->
	
	<h2>实例4、默认选项卡切换</h2>
	<ul class="tabbtn" id="normaltab">
		<li class="current"><a href="http://www.lanrenzhijia.com.com/">jquery 特效</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">javascript 特效</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">div+css 教程</a></li>
		<li><a href="http://www.lanrenzhijia.com.com/">HTML5 特效</a></li>
	</ul><!--tabbtn end-->
	<div class="tabcon" id="normalcon">
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery表格变色隔行变色鼠标滑过竖直表格内容变色效果</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jQuery浮动层点击图标按钮关闭或展开</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery浮动定位层导航描点上下滚动的浮动导航</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div css3样式表制作jquery返回顶部特效</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 表格插件控制表格表格内容拖动标题固定在顶部</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery表格可编辑修改表格里面的数值</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js图片切换插件带滤镜百叶窗图片js幻灯片切换特效</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js图片特效制作js焦点图上下滚动slider切换效果</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">js文字特效制作js文字闪烁与文字变色效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div+css制作在IE6 上用absolute模拟fixed IE6浏览器定位层框不闪动</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">CSS如何定位工程</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">div+css导航菜单用CSS样式表处理斜角导航条</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">用div+css3美化制作动画导航特效鼠标滑过动画显示</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">css3垂直滑动手风琴导航菜单多种手风琴演示</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">css3教程应用css3 transform属性 图片旋转与盒投影+鼠标悬停效果</a></li>
			</ul>
		</div><!--tabcon end-->
		<div class="sublist">
			<ul>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 图片特效用CSS3和HTML5制作仿动画头条报纸缩小到放大翻转图片展示</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 幻灯片切换应用一个HTML5的幻灯片</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery html5 canvas 图表插件获取表格数据值生成走势图</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery select框应用jquery ui滑块slider制作日期时间进度条</a></li>
				<li><span>▪</span><a href="http://www.lanrenzhijia.com.com/" target="_blank">jquery progress bar进度条插件，投票进度条系统</a></li>
			</ul>
		</div><!--tabcon end-->
	</div><!--tabcon end-->
	
	<dl>
		<dt>应用说明：</dt>
		<dd>* 应用对象必须为标签按钮的直接父元素，且父元素内不包含其他非按钮元素</dd>
		<dd>* example: 
<pre>
$( ".menus_wrap" ).tabso({
	cntSelect:".content_wrap",
	tabEvent:"mouseover" 
});
</pre>
		</dd>
		<dd>* cntSelect：内容块的直接父元素的 jq 选择器</dd>
		<dd>* tabEvent：触发事件名</dd>
		<dd>* tabStyle：切换方式。可取值："normal" "fade" "move" "move-fade" "move-animate"</dd>
		<dd>* direction：移动方向。可取值："left" "top" （tabStyle为"move"或"move-fade" "move-animate"时有效）</dd>
		<dd>* aniMethod：动画方法（特殊效果需插件（如：easing）支持，tabStyle为"move-animate"时有效）</dd>
		<dd>* aniSpeed：动画速度</dd>
		<dd>* onStyle：菜单选中样式名</dd>
	</dl>
	
</div><!--tabbox end-->
<script type="text/javascript" src="js/jquery.tabso_yeso.js"></script>
<script type="text/javascript">
$(document).ready(function($){
	
	//上下滑动选项卡切换
	$("#move-animate-top").tabso({
		cntSelect:"#topcon",
		tabEvent:"mouseover",
		tabStyle:"move-animate",
		direction : "top"
	});
	
	//左右滑动选项卡切换
	$("#move-animate-left").tabso({
		cntSelect:"#leftcon",
		tabEvent:"mouseover",
		tabStyle:"move-animate",
		direction : "left"
	});
	
	//淡隐淡现选项卡切换
	$("#fadetab").tabso({
		cntSelect:"#fadecon",
		tabEvent:"mouseover",
		tabStyle:"fade"
	});
	
	//默认选项卡切换
	$("#normaltab").tabso({
		cntSelect:"#normalcon",
		tabEvent:"mouseover",
		tabStyle:"normal"
	});
	
});
</script>
</body>
</html>